<template>
	<div>
		<uni-data-checkbox
			:multiple="true"
			:disabled="state == 'disabled'"
			v-model="infoData"
			:localdata="dictList"
			@change="change"></uni-data-checkbox>
	</div>
</template>

<script>
	export default {
		name: '',
		components: {},
		props: {
			value: {
				required: false,
			},
			state: {
				required: false,
			},
			disabled: {
				required: false,
			},
			dict: {
				required: false,
				default: () => {},
			},
			label: {
				required: false,
			},
		},
		data() {
			return {
				index: undefined,
				current: undefined,
				dictList: [],
			};
		},
		computed: {
			infoData: {
				get() {
					if (Array.isArray(this.value)) {
						return this.value;
					} else {
						if (this.notEmpty(this.vlaue)) {
							return [this.value];
						} else {
							return [];
						}
					}
				},
				set(val) {
					this.$emit('input', val[0]);
				},
			},
			dictValue() {
				return this.dict?.value ?? 'value';
			},
			dictLabel() {
				return this.dict?.label ?? 'label';
			},
		},
		created() {},
		watch: {
			dict: {
				handler: function (val) {
					this.initDict();
				},
				deep: true,
				immediate: true,
			},
		},
		mounted() {},
		methods: {
			change(e) {
				console.log(e);
				this.$emit('change', {
					val: e.detail?.value ?? {},
					item: e.detail?.data ?? {},
				});
			},
			initDict() {
				if (this.dict?.list?.length > 0) {
					this.dictList = this.dict.list;
					this.dictList.map(item => {
						if (!('text' in item)) {
							item.text = this.getDictLabel(item);
						}
						if (!('value' in item)) {
							item.value = this.getDictValue(item);
						}
						if (!('disable' in item)) {
							item.disable = false;
						}
					});
				}
			},

			getDictLabel(data) {
				return (
					data?.[this.dict?.label] ??
					data?.dictLabel ??
					data?.label ??
					data?.text
				);
			},
			getDictValue(data) {
				return (
					data?.[this.dict?.value] ?? data?.dictValue ?? data?.value
				);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.uni-input {
		line-height: 30rpx;
		margin-left: 10rpx;
	}
	.read {
		// min-height: 32px;
	}
	.disabled {
		color: #606266;
	}
</style>
